<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>商品详情</title>
    <link rel="stylesheet" type="text/css" href="Swiper-3.4.2/dist/css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="css/aui/minute.css" />
    <script type="text/javascript" src="js/aui/aui-popup.js" ></script>
    <script type="text/javascript" src="js/jquery-3.1.1/jquery-3.1.1.min.js" ></script>
    <!-- Demo styles -->
    <style>
        html, body {
            position: relative;
            height: 100%;
        }
        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color:#000;
            margin: 0;
            padding: 0;
        }
        .swiper-container {
            width: 100%;
            /*height: 100%;*/
        }
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
        .black_overlay{
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.3);
            z-index:1001;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=80);
        }
        .white_content {
            display: none;
            position: absolute;
            top: 30%;
            left: 0;
            width: 100%;
            height: 70%;
            border: 16px solid #ffffff;
            background-color: white;
            z-index:1002;
            overflow: auto;
        }
        .white_content_small {
            display: none;
            position: absolute;
            top: 20%;
            left: 30%;
            width: 40%;
            height: 50%;
            border: 16px solid lightblue;
            background-color: white;
            z-index:1002;
            overflow: auto;
        }
        .tag1{
            margin-top:12px;
        }
        @media(min-width: 768px){
            .tag1{
                margin-top:16px;
            }
        }
		/*--xin--*/
        .close{
            border-radius: 1rem;
            border:1px solid;
            width:1rem;
            right:1rem;
            text-align: center;
        }
        #min{
            float: left;
            color: #757575;
            width:1.25rem;
            height:1.25rem;
            padding: 0;
            line-height: 1.25rem;
        }
        #max{
            float: left;
            color: #757575;
            width:1.25rem;
            height:1.25rem;
            padding: 0;
            line-height: 1.25rem;
        }
        #num{
            width:30px;
            min-height:30px;
            text-align: center;
        }
        .aui-list:before{
        	background-color:#FFFFFF;
        }
        .aui-list:after{
        	background-color:#FFFFFF;
        }
        .choose1{
        	width:90%;
        }
    </style>
</head>
<body>
<script type="text/javascript">
    //弹出隐藏层
    function ShowDiv(show_div,bg_div){
        document.getElementById(show_div).style.display='block';
        document.getElementById(bg_div).style.display='block' ;
        var bgdiv = document.getElementById(bg_div);
        bgdiv.style.width = document.body.scrollWidth;
        // bgdiv.style.height = $(document).height();
        $("#"+bg_div).height($(document).height());
    };
    //关闭弹出层
    function CloseDiv(show_div,bg_div)
    {
        document.getElementById(show_div).style.display='none';
        document.getElementById(bg_div).style.display='none';
    };
</script>
<header class="aui-bar aui-bar-nav" style="position: fixed;top: 0; color: #CCC;background-color:rgba(255,255,255,0);" >
    <div class="aui-row">
    <a href="classify1.html" class="aui-pull-left aui-col-xs-10">
        <span style="color: #03a9f4" class="aui-iconfont aui-icon-left"></span>
    </a>
    <a href="carts.html" class="aui-pull-left aui-col-xs-1">
        <span style="color: #03a9f4" class="aui-iconfont aui-icon-cart"></span>
    </a>
        <div style="color: #03a9f4" class="aui-col-xs-1 aui-iconfont aui-icon-more" aui-popup-for="top-right"><div class="aui-dot"></div></div>

        <div class="aui-popup aui-popup-top-right" id="top-right">
            <div class="aui-popup-arrow"></div>
            <div class="aui-popup-content">
                <ul class="aui-list aui-list-noborder">
                    <li class="aui-list-item">
                        <div class="aui-list-item-label-icon">
                            <i style="color: #121;" class="aui-iconfont aui-icon-comment"></i>
                        </div>

                        <div class="aui-list-item-inner aui-list-item-middle">
                            消息
                        </div>
                        <div class="aui-dot tag1"></div>
                    </li>
                    <li class="aui-list-item">
                        <div class="aui-list-item-label-icon">
                            <i style="color: #121;" class="aui-iconfont aui-icon-home"></i>
                        </div>
                        <div class="aui-list-item-inner">
                            首页
                        </div>
                    </li>
                    <li class="aui-list-item">
                        <div class="aui-list-item-label-icon">
                            <i style="color: #121;" class="aui-iconfont aui-icon-my"></i>
                        </div>
                        <div class="aui-list-item-inner">
                            帮助
                        </div>
                    </li>
                    <li class="aui-list-item" onclick="ShowDiv('MyDiv','fade')">
                        <div class="aui-list-item-label-icon">
                            <i style="color: #121;" class="aui-iconfont aui-icon-share"></i>
                        </div>
                        <div class="aui-list-item-inner">
                            分享
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <a class="aui-pull-left aui-col-xs-1">
        </a>
        <div class="aui-bar aui-bar-btn aui-bar-btn-sm aui-bar-btn-full">
            <div class="aui-bar-btn-item aui-active">评价</div>
            <div class="aui-bar-btn-item aui-active">详情</div>
        </div>
    </div>
</header>
<div id="fade" class="black_overlay" onclick="CloseDiv('MyDiv','fade')">
</div>
<div id="MyDiv" class="white_content">
    <!--<div style="text-align: right; cursor: default; height: 40px;">-->
        <!--<span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">关闭</span>-->
    <!--</div>-->
   <div class="aui-list aui-media-list">
       <div class="aui-list-item">
           <div class="aui-media-list-item-inner">
               <div class="aui-list-item-inner">
                   <div class="aui-list-item-title" style="text-align: center">
                       分享
                   </div>
                   <div class="aui-list-item-title">
                       <div class="aui-row">
                           <div class="aui-col-xs-2">
                               <i class="aui-iconfont aui-icon-info"></i>
                           </div>
                           <div class="aui-col-xs-2">
                               <i class="aui-iconfont aui-icon-info"></i>
                           </div>
                           <div class="aui-col-xs-2">
                               <i class="aui-iconfont aui-icon-info"></i>
                           </div>
                       </div>
                   </div>

               </div>
           </div>
       </div>
   </div>
</div>
<!-- Swiper -->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img style="width: 100%;"  src="img/tu1.png"> </div>
        <div class="swiper-slide"><img style="width: 100%;"  src="img/tu2.png"></div>
        <div class="swiper-slide"><img style="width: 100%;"  src="img/tu3.png"></div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
</div>
<!--minute-->
<div class="aui-content" style="margin-bottom: 2.5rem;">
    <div class="aui-list aui-media-list">
        <div class="aui-list-item">
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">
                        今年房价的覅极地馆绝地反击发动机GV会大幅度VB回复VB
                    </div>
                    <div style="color: red;" class="aui-list-item-title">
                        ￥399.<a style="font-size: 14px;" >56<a style="margin-left: 10px; font-size: 12px; border: 1px solid red;">快乐剁手价</a></a>
                    </div>
                    <!--<div style="font-size: 12px;color: #9e9e9e;" class="aui-list-item-title">-->
                        <!--价格 <a style="text-decoration: line-through;" >￥500</a>-->
                    <!--</div>-->
                </div>
            </div>
        </div>
        <!--xin-->
        <div class="aui-list-item"  aui-popup-for="bottom">
            <div class="aui-list-item-inner aui-list-item-arrow">
                <div class="aui-list-item-title">产品参数</div>
            </div>
        </div>
        <!-- --弹窗-- -->
                <div class="aui-popup aui-popup-bottom" id="bottom" style="left:0%;margin-left: 0;min-width: 100%;margin-bottom: -0.5rem;">
                    <div class="aui-popup-arrow"></div>
                    <div class="aui-popup-content">
                        <ul class="aui-list aui-list-noborder">
                            <li class="aui-list-item" style="padding-left: 0;">
                                <div class="aui-list-item-inner aui-list-item-middle" style="padding-top: 0;padding-bottom: 0;padding-right: 0;">
                                    <div class="aui-list aui-media-list" style="width:100%;">
                                        <div class="aui-list-item" style="padding-left:0;">
                                            <div class="aui-media-list-item-inner">
                                                <div class="aui-list-item-media">
                                                    <img src="img/fenlei1.jpg">
                                                </div>
                                                <div class="aui-list-item-inner" style="padding-right: 0;">
                                                    <div class="aui-list-item-text">
                                                        <div class="aui-list-item-title" style="color:red;text-align:left;">
                                                            ￥98
                                                        </div>
                                                        <div class="aui-list-item-right close">
                                                            x
                                                        </div>
                                                    </div>
                                                    <div class="aui-list-item-text">库存202件</div>
                                                    <div class="aui-info">已选：“蓝色” “XL”</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="aui-list-item">
                                <div class="aui-list-item-inner">
                                    <div class="aui-list aui-media-list" style="width:100%;">
                                        <div class="aui-list-header" style="background-color: #ffffff;">颜色分类</div>
                                        <div class="aui-list-item">
                                            <div class="aui-row">
                                                <div class="aui-col-xs-3">
                                                    <div class="aui-btn choose">
                                                        白色
                                                    </div>
                                                </div>
                                                <div class="aui-col-xs-3">
                                                    <div class="aui-btn choose">
                                                        黑色
                                                    </div>
                                                </div>
                                                <div class="aui-col-xs-3">
                                                    <div class="aui-btn choose">
                                                        红色
                                                    </div>
                                                </div>
                                                <div class="aui-col-xs-3">
                                                    <div class="aui-btn choose">
                                                        蓝色
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="aui-list-item">
                                <div class="aui-list-item-inner">
                                    <div class="aui-list aui-media-list" style="width:100%;">
                                        <div class="aui-list-header" style="background-color: #ffffff;">尺寸</div>
                                        <div class="aui-list-item">
                                            <div class="aui-row">
                                                <div class="aui-col-xs-2">
                                                    <div class="aui-btn choose1">
                                                        M
                                                    </div>
                                                </div>
                                                <div class="aui-col-xs-2">
                                                    <div class="aui-btn choose1">
                                                        L
                                                    </div>
                                                </div>
                                                <div class="aui-col-xs-2">
                                                    <div class="aui-btn choose1">
                                                        XL
                                                    </div>
                                                </div>
                                                <div class="aui-col-xs-2">
                                                    <div class="aui-btn choose1">
                                                        2XL
                                                    </div>
                                                </div>
                                                <div class="aui-col-xs-2">
                                                    <div class="aui-btn choose1">
                                                        3XL
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="aui-list-item">
                                <div class="aui-list-item-inner">
                                    <div class="aui-row">
                                        <div class="aui-col-xs-4">购买数量</div>
                                        <div class="aui-col-xs-4">　</div>
                                        <div class="aui-col-xs-4">
                                            <a class="aui-btn aui-btn-default aui-btn-xs" id="min" onclick="min1()">-</a>
                                            <span style="float:left;">
												<input type="text" name="num" id="num" value="1">
											</span>
                                            <a class="aui-btn aui-btn-default aui-btn-xs" id="max" onclick="max1()">+</a>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="aui-list-item" style="padding-left:0;">
                            	<div class="aui-list-item-inner" style="padding-bottom: 0;padding-right:0;">
                            		<div class="aui-row">
                            			<div class="aui-col-xs-6" style="text-align: center;">
                            				<a class="aui-btn aui-btn-warning aui-btn-block">加入购物车</a>
                            			</div>
                            			<div class="aui-col-xs-6" style="text-align: center;">
                            				<a class="aui-btn aui-btn-info aui-btn-block">立即购买</a>
                            			</div>
                            		</div>
                            	</div>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- --弹窗 end-- -->
        <!--xin end-->
        <div class="aui-content aui-margin-b-15">
            <ul class="aui-list aui-media-list">
                <li class="aui-list-header">
                    评价
                </li>
            </ul>
            <section class="aui-content">
                <div class="aui-card-list">
                    <div class="aui-card-list-header">
                        <div class="aui-info-item">
                            <img src="../../imageulangnan.png" style="width:1rem" class="aui-img-round" />
                            <span class="aui-margin-l-5">流浪男</span>
                        </div>
                    </div>
                    <div class="aui-card-list-content-padded">
                        用户评价内容
                    </div>
                    <div class="aui-card-list-footer">
                        <div class="aui-info-item">2015-07-14 10:31</div>
                        颜色、分类、尺码
                    </div>
                </div>
                </section>
        </div>
        <div class="aui-content aui-margin-b-15">
            <ul class="aui-list aui-media-list">
                <li class="aui-list-header">
                    详情
                </li>
            </ul>
            <section class="aui-content">
                <div class="aui-card-list">
                    <div class="aui-card-list-header">
                        <div class="aui-info-item">
                            <img src="../../imageulangnan.png" style="width:1rem" class="aui-img-round" />
                            <span class="aui-margin-l-5">流浪男</span>
                        </div>
                    </div>
                    <div class="aui-card-list-content-padded">
                        用户评价内容
                    </div>
                    <div class="aui-card-list-footer">
                        <div class="aui-info-item">2015-07-14 10:31</div>
                        颜色、分类、尺码
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>
<!----xin footer---->
<footer class="aui-bar aui-bar-tab" id="footer" style="border-top:1px solid #CCCCCC;">
	<div class="aui-bar-tab-item aui-active" tapmode>
		<i class="aui-iconfont aui-icon-comment"></i>
		<div class="aui-bar-tab-label">客服</div>
	</div>
	<div class="aui-bar-tab-item" tapmode>
		<i class="aui-iconfont aui-icon-star"></i>
		<div class="aui-bar-tab-label">收藏</div>
	</div>
	<div class="aui-bar-tab-item" tapmode>
		<a class="aui-btn aui-btn-warning aui-btn-block">加入购物车</a>
	</div>
	<div class="aui-bar-tab-item" tapmode>
		<a class="aui-btn aui-btn-info aui-btn-block">立即购买</a>
	</div>
</footer>
<!----xin footer end---->
<!-- Swiper JS -->
<script src="Swiper-3.4.2/dist/js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        loop:true,
        paginationClickable: true
    });
</script>

    <script type="text/javascript">
    var popup = new auiPopup();
    function showPopup(){
        popup.show(document.getElementById("top-right"))
    }
//    --xin--
    var popup = new auiPopup();
    function showPopup(){
        popup.show(document.getElementById("bottom"))
    }

    $(".close").click(function(){
        $("#bottom").hide();
        $(".aui-mask").hide();
    })
    $(".choose").click(function(){
        $(this).addClass("dd").parent().siblings().children().removeClass("dd");
        var yanse = $(this).text();
        $(".aui-info").text("已选:“"+yanse+"”");
        alert("请选择尺寸");


        $(".choose1").click(function(){
            $(this).addClass("dd").parent().siblings().children().removeClass("dd");
            var chicun = $(this).text();
            $(".aui-info").text("已选:“"+yanse+"” “"+chicun+"”");
            $(".des").text("颜色:"+yanse+"; 尺寸:"+chicun);
        })

    })
    
    var min=document.getElementById("min");
			var num=document.getElementById("num");
			var max=document.getElementById("max");

			function min1(){
				if(num.value<=1){
					num.innerHTML=1;
				}else{
					num.value-=1;
					num.innerHTML=num.value;
				}
			}
			function max1(){
				var num1 =parseInt(num.value);
				if(num1 >= 500){
					alert("亲，该宝贝不能购买更多哦！");
					num.value=500;
				}
				else{
					num.value=num1+1;
				}
			}
//        --xin end--
</script>

<!--移动端获取高度控制评价详情显示隐藏-->
<script>
    var dpi = window.devicePixelRatio;//获取屏幕分辨率
    var height = sysHeight / dpi;//用系统返回宽度除以分辨率
</script>
</body>
</html>
